<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            border: 1px solid #999;
            position: relative;
            overflow: hidden;
        }
        .fj1 {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: yellowgreen;
            position: absolute;
        }
        .fj2 {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            color: orange;
            position: absolute;
        }
    </style>
</head>
<body>
    <button onclick="add()">生成敌机</button>
    <button onclick="up()">升级敌机</button>
    <button onclick="clear11()">销毁敌机</button>
    <div class="div1"></div>

    <script>
        var div1 = document.querySelector('.div1');
        var upIndex = 0; // 当前升级的敌机的索引

        function add() {
            // 生成敌机
            var fj = document.createElement('div');
            fj.className = 'fj1';
            var randLeft = Math.ceil(Math.random()*200); // 横坐标
            var initTop = -10;
            var speed = Math.ceil(Math.random()*5); // 飞行速度
            fj.style.left = randLeft+'px' // 随机
            fj.style.top = initTop+'px'
            // 添加到div1中
            div1.appendChild(fj);
            // 飞机往下飞 top值逐步变化
            setInterval(function(){
                if(initTop < 220) {
                    initTop += 1
                    fj.style.top = initTop+'px'
                }else {
                    // div1.removeChild(fj)
                }
            }, 80)
        }

        function up() {
            var fj_old_list = document.querySelectorAll('.fj1'); // 老飞机
            var currFj = fj_old_list[upIndex];  // 当前要升级的飞机
            if(currFj) {
                currFj.innerHTML = '✈️';
                upIndex ++
            }
        }

        function clear11() {
            // 销毁--干掉新的如果没有新的 就删除老的
            var fj = null;
            if(document.querySelector('.fj2')) { // 新飞机存在
                fj = document.querySelector('.fj2')
            }else if(document.querySelector('.fj1')) { // 老飞机存在
                fj = document.querySelector('.fj1')
            }else {
                alert('通关了 卸载吧')
                return
            }
            if(fj) {
                // 还有飞机存在
                div1.removeChild(fj)
            }
        }
    </script>
</body>
</html>